<template>

	<div class="navlist">
		<div class="row" v-for="(item,index) in list" :key="index">
			<div class="bg" :style="{'backgroundColor': item.bg}"></div>
			<div class="info">
				<span>{{item.number}}</span>
				<span>{{item.name}}</span>
			</div>
		</div>
	</div>

</template>

<script>
export default {
	name: 'vNavlist',
	data () {
		return {
			list: [
				{ bg: "green", number: "150门", name: "课程设置总量" },
				{ bg: "orange", number: "70门", name: "本学期开课总量" },
				{ bg: "blue", number: "5个", name: "课程运行预警" },
				{ bg: "green", number: "20个", name: "逃课预警" },
				{ bg: "purple", number: "5个", name: "教师使用预警" },
				{ bg: "green", number: "10000点", name: "知识图谱" },
				{ bg: "orange", number: "5%", name: "精品课程" },
				{ bg: "blue", number: "23个", name: "成绩预警" },
				{ bg: "green", number: "5节", name: "学生都课概率预警" },
				{ bg: "purple", number: "1个", name: "督导评价预警" }
			]
		}
	},
}
</script>

<style scoped >

	.navlist{
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
		background-color: #DDD;
	}
	.row{
		width: 18%;
		height: 70px;
		display: flex;
		margin:10px 0;
	}
	.row .bg{
		flex: 1;
	}
	.row .info{
		flex: 2;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background-color: white;
	}
</style>
